<template>
	<view class="procure-contract-list">
		<view class='list' v-if="procureContractEntities">
			<view class="top-line">
				已收款共计：<span style="color: #FF4D15">{{contractBo.completeTotal}}</span>元，待收款共计：<span style="color: #FF4D15">{{contractBo.incompleteTotal}}</span>元
			</view>
			<view class='item' v-for="(contract, index) in procureContractEntities" :key="index">
				<view class='top' @click='querySingle(contract)'>
					<view class='number-box line'>
						<view class='project-number'>{{contract.contractTitle}}</view>
						<view class='status'>
							<uni-tag :text="contract.status==0?'未审批':(contract.status==1?'审批中':'已审批')"
								:type="contract.status==0 ? 'error' : (contract.status==1?'success':'primary')" />
						</view>
					</view>
					<view class='name-box line'>{{contract.companyName == null ? '--' : contract.companyName}}</view>
					<view class='name-box line'>{{contract.contractPrice == null ? '--' : '￥'+contract.contractPrice}}</view>
					<view class='partner-box line'>{{contract.payStatus}}</view>
					<view class='user-box line'>
						<view class='user'>{{contract.applyUserName}}</view>
						<view class='executeStatus' :style="contract.executeStatus==0?'color:#f54722':(contract.executeStatus==1?'color:#3db0cb':(contract.executeStatus==2?'color:#11374e':(contract.executeStatus==3?'color:#607d8b':'color:#03A9F4')))">
						{{contract.executeStatus==0?'未开始':(contract.executeStatus==1?'执行中':(contract.executeStatus==2?'已发货':(contract.executeStatus==3?'未结算':'已结算')))}}</view>
					</view>
				</view>
				<view class='createTime'>
					<view>
						<text class="iconfont icon-rili"></text>创建时间：
						<uni-dateformat :date="contract.createTime" format='yyyy-MM-dd hh:mm:ss'></uni-dateformat>
					</view>
					<view>
						<uni-tooltip placement="top">
							<view>更多</view>
							<template slot="content">
								<a @click="deleteSingle(contract)">删除</a>&nbsp;/&nbsp;<a
									@click="updateSingle(contract)">编辑</a>&nbsp;/&nbsp;<a
									@click="approve(contract)">审批</a>
							</template>
						</uni-tooltip>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more iconType="circle" v-if="procureContractEntities.length" :status="loadingStatus"></uni-load-more>
		<o-empty v-else bg="#f3f3f3"></o-empty>
		<!-- 审批 -->
		<view class="bottom-modal-box">
			<uni-popup ref="approvePopup" background-color="#fff">
				<view class="popup-content">
					<ApprovePopup :flag="1" :relationId="id"></ApprovePopup>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '../../util/api'
	export default {
		data() {
			return {
				procureContractEntities: [],
				contractBo: {},
				page: 1,
				limit: 10,
				count: 0,
				loadingStatus: 'more',
				applyUserId: null,
				isUsed: 1,
				id: ''
			}
		},
		created() {
			this.queryList()
			this.queryTotalMoney()
		},
		beforeMount() {
			uni.$on('onReachBottomProcureContract', () => {
				this.onReach()
			})
			uni.$on('addProcureContract', () => {
				uni.navigateTo({
					url: '/pages/contract/AddContract?type=2'
				})
			})
			uni.$on('reloadProcureContractList', () => {
				uni.$emit('financeList', 3)
				uni.switchTab({
					url: '/pages/finance/FinanceNav'
				})
				this.procureContractEntities = []
				this.queryList()
			})
			uni.$on('closePopup', () => {
				this.$refs.approvePopup.close()
			})
		},
		destroyed() {
			uni.$off('onReachBottomProcureContract')
			uni.$off('reloadProcureContractList')
			uni.$off('addProcureContract')
			uni.$off('closePopup')
		},
		methods: {
			async queryList() {
				let contract = {
					applyUserId: this.applyUserId,
					type: 2,
					page: this.page,
					limit: this.limit,
					isUsed: this.isUsed
				}
				let res = await post(api.ContractEntities, contract)
				this.count = res.count
				this.loadingStatus = "more"
				this.procureContractEntities = [...this.procureContractEntities, ...res.data]
			},
			//上拉刷新处理
			async onReach() {
				if (this.procureContractEntities.length >= this.count) {
					return (this.loadingStatus = "no-more")
				}
				this.page++
				this.loadingStatus = "loading"
				await new Promise((resolve) => setTimeout(resolve, 300))
				await this.queryList()
			},
			queryTotalMoney() {
				post(api.TotalMoney, {type: 2, isUsed: this.isUsed}).then(res => {
					this.contractBo = res.data
				})
			},
			querySingle(contract) {
				uni.navigateTo({
					url: '/pages/contract/ContractInfo?type=2&id=' + contract.id
				})
			},
			deleteSingle(contract) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '你确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							post(api.DeleteContract, {
								id: contract.id
							}).then(res => {
								that.procureContractEntities = []
								that.queryList()
							})
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			},
			updateSingle(contract) {
				uni.navigateTo({
					url: '/pages/contract/AddContract?type=2&id='+contract.id
				})
			},
			approve(contract) {
				this.id = contract.id
				this.$refs.approvePopup.open('bottom')
			}
		}
	}
</script>

<style lang="less">
	@import '../../static/css/ProcureContractList.css';
</style>